<template>
  <div>
      <table border="1" cellspacing="0" width="80%">
        <thead>
          <tr><th>商品名</th><th>产地</th><th>单价</th><th>数量</th><th>单项总价</th><th>类别</th><th>操作</th></tr>
        </thead>

        <tbody>
          <tr v-for="product in productList">
            <td>{{product.name}}</td>
            <td>{{product.factory}}</td>
            <td>{{product.price}}</td>
            <td><input type="text" v-model="product.num"></td>
            <td>{{product.price * product.num}}</td>
            <td>{{product.type}}</td>
            <td><input type="button" value="删除" @click="del(product.id)"/>
                <input type="button" value="修改" @click="findById(product.id)">
            </td>
          </tr>
        </tbody>
        <input type="button" v-for="page in pages" :key="page"
        :value="page" @click="findByItem(page)" style="margin-left: 10px;"/>

        <div>
          购物车总价：{{totalPrice}}
        </div>
        <input type="button" value="添加" @click="addVisible=true"/>
      </table>

    <div class="dialogDiv" v-if="addVisible">
        <div class="content">
           编号：<input type="text" v-model="addObj.id"><br>
          商品名：<input type="text" v-model="addObj.name"><br>
          产地：<input type="text" v-model="addObj.factory"><br>
          单价：<input type="text" v-model="addObj.price"><br>
          类别：<select v-model="addObj.type">
                <option value="电器">电器</option>
                <option value="食品">食品</option>
              </select><br>
          <input type="button" value="添加" @click="addProdut">
        </div>
    </div>

    <div class="dialogDiv" v-if="updateVisible">
      <div class="content">
        编号：{{updateObj.id}}<br>
        商品名：{{updateObj.name}}<br>
        产地：{{updateObj.factory}}<br>
        单价：<input type="text" v-model="updateObj.price"><br>
        类别：{{updateObj.type}}<br>
        <input type="button" value="修改" @click="updateProduct">
      </div>

    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      addVisible:false,
      pages:5,
      addObj:{},
      productList:[
        {"id":1,"name":"电饭煲",factory:"深圳",price:500,type:"电器",num:1},
        {"id":2,"name":"饼干",factory:"青岛",price:12,type:"食品",num:1},
        {"id":13,"name":"电水壶",factory:"北京",price:400,type:"电器",num:1},
        {"id":4,"name":"电冰箱",factory:"青岛",price:1400,type:"电器",num:1},
        {"id":8,"name":"汉堡",factory:"成都",price:4,type:"食品",num:1},
        {"id":5,"name":"薯条",factory:"上海",price:6,type:"食品",num:1}
      ],
      updateVisible:false,
      updateObj:{}
    }
  },
  methods:{
    addProdut(){
      //在集合中添加对象
      this.productList.push(this.addObj);
      this.addVisible = false;
    },
    del(id){
      //找到指定编号对应的下标
      var index = this.productList.findIndex(n => n.id == id);
      this.productList.splice(index,1);
    },
    findById(id){
      this.updateVisible  = true;
      this.updateObj = this.productList.find(n => n.id == id);
    },
    updateProduct(){
      this.updateObj = {};
      this.updateVisible = false;
    },
    findByItem(page){
      alert(page);
    }
  },
  computed:{
    totalPrice(){
      var total = 0;
      this.productList.forEach(n =>{
        total += n.price * n.num;
      });
      return total;
    }
  }
}
</script>

<style scoped>
  .dialogDiv{
    width: 100%;
    height: 100%;
    background: rgba(255,0,0,0.5);
    display: flex;
    position: absolute;
    left: 0px;
    top:0px;
    justify-content: center;
    align-items: center;
  }

  .content{
    width: 600px;
    height: 400px;
    background: white;
    border: 2px solid #000;
    padding: 20px;
  }
</style>